

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TopBar extends StatelessWidget {
  const TopBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      decoration: const BoxDecoration(
        //背景Colors.transparent 透明
        // color: Colors.black.withOpacity(0.3),
        color: Colors.transparent,
        //设置四周圆角 角度
        // borderRadius: const BorderRadius.all(Radius.circular(4.0)),
        //设置四周边框
        border: Border(bottom: BorderSide(width: 1, color: Colors.white)),
      ),
      child: Stack(
        children: [
          ClipRRect(
            // borderRadius: BorderRadius.circular(100),
            child: SizedBox(
              height: 50,
              // width: 150,
              child: _blurryBg(),
            ),
          ),
          const Row(
            children: [
              Text("家庭影院"),
              Expanded(child: Center(child: Text("标题"),)),
              Text("操作"),
            ],
          ),
        ],
      )
    );
  }

  Widget _blurryBg() {
    return ClipRect(
      child: BackdropFilter(
        //设置图片模糊度 配套ClipRect使用，不然会造成全局模糊：BackdropFilter-毛玻璃效果
        filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
        child: Container(color: Colors.black.withOpacity(0.1)),
      ),
    );
  }


}